<template>
  <div>
      <!-- 头部，用户信息 -->
        <router-link :to="`/user_edit?id=${$route.query.id}`" class="info">
<div class="avatar">
  <van-image
  round
  width="100%"
  height="100%"
   :src="userinfo.head_img"
/>
</div>
<div class="center">
    <p class="username">
        <!-- 其实性别旧两个，可以通过 v-if v-else 互斥显示渲染一个 -->
        <i class="iconfont iconxingbienan" v-if="userinfo.gender"></i>
        <i class="iconfont iconxingbienan" v-else></i>
       <span>{{userinfo.nickname}}</span>
    </p>
    <p class="date">{{userinfo.create_date|filters}}</p>
</div>
<i class="iconfont iconjiantou1"></i>
       </router-link>
      <!-- 单元格 -->
      <Mycell title="我的关注" 
      
      value="关注的用户"
       to="/user_follow"
      
      ></Mycell>
       <Mycell title="我的跟帖" 
       value="跟帖/回复"
       to="/user_comment"
       ></Mycell>
        <Mycell title="我的收藏"
         value="文章/视频"
           to="/user_star"
         ></Mycell>
         <Mycell title="设置" 
         @click="cellFn"
         ></Mycell>
         <MyButton @click="logoutFn">退出</MyButton>
  </div>
</template>

<script>
import Mycell from '../components/Mycell.vue'
import MyButton from '../components/MyButton.vue'
import {userDetailByIdAPI} from '../apis/user'
import  {removeToken} from '../utils/localData'
import request from '../utils/request.js'
export default {
components: {
    Mycell,
    MyButton
},
data () {
    return {
        // / 💥注意：这里的初始值是对象，如果是空字符串，模板中的点语法引用就会报错
        userinfo:{}
    }
},
  methods: {
    cellFn() {
      console.log("我这里不是跳转，只是一个普通点击事件处理函数");
      // this.$router.push({ path: "/attention" });
    },
    logoutFn(){
        //询问是否退出-弹出框
        //点击确定
        //清楚token
        //跳转到登录页
        //取消不做任务事情
        this.$dialog.confirm({
  title: '是否退出',
 
})
  .then(() => {
    // on confirm
// localStorage.removeItem('hmtt_token')
    removeToken();
this.$router.push({path:'/login'})
  })
  .catch(() => {
    // on cancel
  });
    }
  },
  async created(){
      //通过vue 找到id到底在那个对象存储
       const id = this.$route.query.id;
      //根据id获取用户信息
      const res = await userDetailByIdAPI(id)
      console.log(res);
      //获取用户头像，需要拼一些请求基地址
       res.data.data.head_img = request.defaults.baseURL + res.data.data.head_img;
    //   console.log(res.data.data.head_img);
      //拿到的数据给到userinfo data哪里
      this.userinfo=res.data.data

  }
}
</script>

<style lang="less" scoped>
.info{
    height: 120px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    .avatar{
        width: 80px;
        height: 80px;
        // background-color: pink;
    }
    .center{
        flex: 1;
        margin-left: 20px;
        .iconxingbienan{
            color: #75b9cd;
        }
    }
    .iconjiantou1{
        font-size: 14px;
    }
}
</style>